<template>
  <div id="home">
    <div class="header">
      <div class="companyName">长沙经济技术开发区水质净化工程有限公司</div>
      <div class="uploadTime">水量数据更新至{{ uploadTime }}</div>
      <img src="../assets/images/titilBg2.png" />
      <!-- <div class="toUpload" @click="toUpload">
                <el-icon color="#FFF" style="font-size: 35rem;" title="文件上传">
                    <UploadFilled />
                </el-icon>
            </div> -->
      <div class="toUpload" style="left: 40rem" @click="toMain">
        <el-icon color="#FFF" style="font-size: 35rem">
          <HomeFilled />
        </el-icon>
      </div>
    </div>
    <div class="contain">
      <div class="cont-item cont-left">
        <!-- 全年完成情况 -->
        <annual-completion></annual-completion>
        <!-- 1-8月目标完成率 -->
        <completion-rate></completion-rate>
        <!-- 四厂水量目标完成情况 -->
        <completion-status></completion-status>
      </div>
      <div class="cont-item act cont-center">
        <!-- 2022年生产经营实时统计分析（水量更新至8月7日） -->
        <production-operation-statistical-analysis></production-operation-statistical-analysis>
        <!-- 全年完成率 -->
        <year-completion-rate></year-completion-rate>
        <!-- 公司全年处理水量 -->
        <treated-water-volume></treated-water-volume>
        <div class="cont-item-child">
          <!-- 四厂日均水量对比 -->
          <div class="cont-item-child-item">
            <four-daily-water-volume-comparison></four-daily-water-volume-comparison>
          </div>
          <!-- 四厂能耗对比 -->
          <div class="cont-item-child-item">
            <four-energy-consumption-comparison></four-energy-consumption-comparison>
          </div>
        </div>
      </div>
      <div class="cont-item cont-right">
        <!-- 财务收支情况 -->
        <finance-status></finance-status>
        <!-- 资产保值率 -->
        <asset-retention-ratio></asset-retention-ratio>
        <!-- 1-6月用水生产成本、处理成本 -->
        <production-processing-cost></production-processing-cost>
        <!-- 四厂用水处理成本 -->
        <four-processing-cost></four-processing-cost>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from "moment";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { UploadFilled, User, HomeFilled } from "@element-plus/icons-vue";
import AnnualCompletion from "@/components/contLeft/AnnualCompletion.vue";
import CompletionRate from "@/components/contLeft/CompletionRate.vue";
import CompletionStatus from "@/components/contLeft/CompletionStatus.vue";
import ProductionOperationStatisticalAnalysis from "@/components/contCenter/ProductionOperationStatisticalAnalysis.vue";
import YearCompletionRate from "@/components/contCenter/YearCompletionRate.vue";
import TreatedWaterVolume from "@/components/contCenter/TreatedWaterVolume.vue";
import FourDailyWaterVolumeComparison from "@/components/contCenter/FourDailyWaterVolumeComparison.vue";
import fourEnergyConsumptionComparison from "@/components/contCenter/fourEnergyConsumptionComparison.vue";
import FinanceStatus from "@/components/contRight/FinanceStatus.vue";
import AssetRetentionRatio from "@/components/contRight/AssetRetentionRatio.vue";
import FourProcessingCost from "@/components/contRight/FourProcessingCost.vue";
import ProductionProcessingCost from "@/components/contRight/ProductionProcessingCost.vue";
const uploadTime = ref(moment().add(-1, "day").format("MM月DD日"));
const router = useRouter();
// const toUpload = () => {
//     router.push({ path: '/upload' })
// }
const toMain = () => {
  router.push({ path: "/main" });
};
</script>
<style lang="less">
@import "@/assets/css/home.less";
</style>
